<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quick Start - Bunny-ui</title>
    <!-- bunny-ui 核心文件 -->
    <link href="/assets/dist/iconfont/iconfont.css" rel="stylesheet" />
    <script src="/assets/dist/bunny.js"></script>
</head>

<body>
    <button class="bny-btn" hx-ext="bny-tab-add" hx-get="/assets/test/tab/tab4-add.json"
        bny-target="#demo01">追加</button>
    <button class="bny-btn" hx-ext="bny-tab-add" bny-target="#demo01" bny-name="静态追加" bny-conten="静态数据"
        bny-is-delete="true" bny-id="2">静态追加</button>
    <button class="bny-btn" hx-ext="bny-tab-del" bny-target="#demo01" bny-id="2">删除指定(选项二)</button>
    <button class="bny-btn" hx-ext="bny-tab-del" bny-target="#demo01" bny-id="this">删除当前</button>
    <button class="bny-btn" hx-ext="bny-tab-del" bny-target="#demo01" bny-id="all">删除全部</button>
    <button class="bny-btn" hx-ext="bny-tab-del" bny-target="#demo01" bny-id="other">删除其他</button>

    <div style="width: 300px;max-width: 100%;">
        <div class="bny-tab" id="demo01" hx-ext="bny-tab" nowrap>
            <div class="bny-tab-title">
                <div class="bny-tab-item this">
                    选项一
                    <span class="icon icon-cuo del"></span>
                </div>
                <!-- 标记属性`bny-id` -->
                <div class="bny-tab-item" bny-id="2">
                    选项二
                    <!-- 有删除按钮才可能触发删除 -->
                    <span class="icon icon-cuo del"></span>
                </div>
                <div class="bny-tab-item">
                    选项三
                    <span class="icon icon-cuo del"></span>
                </div>
                <div class="bny-tab-item">
                    选项四
                    <span class="icon icon-cuo del"></span>
                </div>
                <div class="bny-tab-item">
                    选项五
                    <span class="icon icon-cuo del"></span>
                </div>
            </div>
            <div class="bny-tab-body">
                <div class="this">我是选项一</div>
                <div>我是选项二</div>
                <div>我是选项三</div>
                <div>我是选项四</div>
                <div>我是选项五</div>
            </div>
        </div>
    </div>
</body>

</html>